<template>
  <div>
    <search></search>
    <div class="frac tabbar">
      <span class="tabbar-item" v-for="(item, index) in tabBarTop" :key="index" v-text="item"></span>
    </div>
    <!-- 产品列表 -->
    <div class="frbswrap product-list-item-container">
      <product-list-item></product-list-item>
      <product-list-item></product-list-item>
      <product-list-item></product-list-item>
    </div>
    <div class="space"></div>
  </div>
</template>

<script>
import Search from '@/components/Search'
import ProductListItem from '@/components/ProductListItem'
export default {
  components: {Search, ProductListItem},
  data () {
    return {
      tabBarTop: ['分类', '综合', '销量', '价格']
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable.styl'
.product-list
  background-color $cf8
.tabbar
  height .88rem
  border-top 1px solid $ceb
  border-bottom 1px solid $ceb
.tabbar-item
  flex-grow 1
  text-align center
  font-size .28rem
  color $c65
  background url('') no-repeat 1.30rem center
  background-size .16rem .16rem
// 组件container
.product-list-item-container
  margin .20rem
.product-list-item-container >>> .product-list-item
  margin-bottom .20rem
</style>
